<template>
    <view v-if="show" :class="(type === 'flash' ? 'l-class' : '') + ' ' + (type + '-spinner') + ' ' + (type === 'change' || custom ? '' : 'spinner-' + type + '-' + size)">
        <block v-if="custom">
            <slot />
        </block>
        <block v-else>
            <view :style="color ? 'background-color:' + color : ''" :class="'l-class ' + (type + '-bounce1') + ' ' + ('spinner-' + type + '-' + size)"></view>
            <view
                v-if="type === 'flash' || type === 'change'"
                :style="color ? 'background-color:' + color : ''"
                :class="'l-class ' + (type + '-bounce2') + ' ' + ('spinner-' + type + '-' + size)"
            ></view>
            <view
                v-if="type === 'change'"
                :style="color ? 'background-color:' + color : ''"
                :class="'l-class ' + (type + '-bounce3') + ' ' + ('spinner-' + type + '-' + size)"
            ></view>
        </block>
    </view>
</template>

<script>
export default {
    externalClasses: ['l-class'],

    props: {
        color: String,
        show: Boolean,
        type: {
            type: String,
            default: 'flash'
        },
        custom: Boolean,
        size: {
            type: String,
            default: 'default'
        }
    },

    methods: {},
    created: function () {}
};
</script>
<style>
.spinner-flash-default {
    width: 60rpx;
    height: 60rpx;
}
.spinner-flash-mini {
    width: 40rpx;
    height: 40rpx;
}
.spinner-flash-large {
    width: 80rpx;
    height: 80rpx;
}
.spinner-flip-default {
    width: 60rpx;
    height: 60rpx;
}
.spinner-flip-mini {
    width: 40rpx;
    height: 40rpx;
}
.spinner-flip-large {
    width: 80rpx;
    height: 80rpx;
}
.spinner-change-default {
    width: 50rpx;
    height: 50rpx;
}
.spinner-change-mini {
    width: 30rpx;
    height: 30rpx;
}
.spinner-change-large {
    width: 70rpx;
    height: 70rpx;
}
.flash-spinner {
    position: relative;
}
.flash-bounce1,
.flash-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #3963bc;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2s infinite ease-in-out;
    animation: bounce 2s infinite ease-in-out;
}
.flash-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
@-webkit-keyframes bounce {
    0%,
    100% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
    }
}
@keyframes bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
.flip-bounce1 {
    background-color: #3963bc;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px);
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    }
}
@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0);
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
.change-spinner {
    width: 240rpx;
    text-align: center;
}
.change-bounce1 {
    background-color: #3963bc;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.change-bounce2 {
    background-color: #3963bc;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.change-bounce3 {
    background-color: #3963bc;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bouncedelay {
    0%,
    100%,
    80% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
    }
}
@keyframes bouncedelay {
    0%,
    100%,
    80% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    40% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
</style>
